<template>
   <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
   <el-table :data="
      tableData.newarr.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
   " style="width: 100%">
      <el-table-column prop="s_id" label="商家id" width="180" />
      <el-table-column prop="s_name" label="商家名称" width="180" />
      <el-table-column prop="s_type" label="商家类型" />
      <el-table-column prop="placeid" label="场地id" />
      <el-table-column prop="isFull" label="是否占用" />
      <el-table-column prop="p_price" label="场地费用" />
      <!-- 添加输入框 -->
      <el-table-column align="right">
         <template #header>
            <el-input v-model="search" size="small" placeholder="Type to search" @keyup.enter="searchMsg()" />
         </template>
      </el-table-column>
      <!-- 添加删除和修改按钮 -->
      <el-table-column>
         <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-show="scope.row.s_id===''">编辑</el-button>
         </template>
      </el-table-column>
      <!-- 添加删除和修改按钮 -->
   </el-table>
   <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tableData.newarr.length"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />

   <!-- 弹出框组件 -->
   <Ud />
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from "vue";
import Ud from "@/components/UpdateChange.vue";

// 引用useStore
import { useStore } from "vuex";
import link from "@/util/api";

// 得到store对象
const store = useStore();

// 设置需要的参数与方法
const currentPage4 = ref(1);

const pageSize4 = ref(10);

const search = ref('')

let tableData = reactive({
   newarr: <any>[]
})

onMounted(() => {
   link('/getShop').then((res: any) => {
      console.log(res.data);
      tableData.newarr = res.data
      console.log(tableData);
   })
})

const searchMsg = () => {
   let arr: any = ref([]);
   console.log("tableData", tableData)
   if (search.value != '') {
      for (let i = 0; i < tableData.newarr.length; i++) {
         if (tableData.newarr[i].s_name.indexOf(search.value) != -1) {
            arr.value.push(tableData.newarr[i])
         }
      }
   } else {
      arr = tableData.newarr
   }
   tableData.newarr = arr
   console.log(tableData.newarr)
}
watch(search,searchMsg)


// 修改下面得方法
const handleSizeChange = (val: number) => {
   //一页显示多少条
   pageSize4.value = val;
};
const handleCurrentChange = (val: number) => {
   //页码更改方法
   currentPage4.value = val;
};

// 添加删除和修改按钮方法与接口
interface User {
   s_name: string;
   s_id: number;
   s_type: string;
   placeid: number;
   isFull: boolean;
   p_price: number
}

//在组件的修改按钮调用函数中添加commit
const handleEdit = (index?: number, row?: User) => {
   console.log('11',index, row)
   // 调用vuex修改
   store.commit("SET_DIALOG")
   store.commit("GG_ROWDATA", row)
};



</script>

<style></style>